
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
import SaveIcon from '@mui/icons-material/Save'
import CancelIcon from '@mui/icons-material/Cancel'
import { useNavigate, useParams } from 'react-router-dom';
import { useState } from 'react';
import {roomService} from '../../services';
import { useMessage } from '../../hooks';

export default function EditRoom() {
    const { roomId, name, capacity, description } = useParams();
    const [room, setRoom] = useState({ name, capacity, description });
    const [loading, setLoading] = useState(false);
    const navigate = useNavigate(); 
    const {showError, showSuccess} = useMessage();
    const onSaveRoom = async () => {
        setLoading(true);

        const formValues = {
            Name: room.name,
            Capacity: room.capacity,
            Description: room.description,
            Id:+roomId
        }

        if (formValues.Name && formValues.Capacity && formValues.Description) {
            try {
                await roomService.updateRoom(formValues);
                showSuccess('saved data successfully');
                navigate("/rooms")                
            } catch (err) {
                showError(err);                    
            } finally {
                setLoading(false); 
            }
        } else {
            showError('errors: required field have did not enter value!');
            setLoading(false);
        }
    }

    return (
        <>
            <Box component="form" sx={{
                '& .MuiTextField-root': { mt: 3, width: '100%' },
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
            }} noValidate autoComplete="off">
                <Stack sx={{ width: '40%' }}>
                    <h2>Edit room </h2>

                    <TextField required value={room.name} onChange={(e) => setRoom({ ...room, name: e.target.value })}
                        id="outlined-required"
                        label="Name"
                    />
                    <TextField
                        required fullWidth value={room.capacity}
                        type="number"
                        onChange={(e) => setRoom({ ...room, capacity: e.target.value })}
                        id="outlined-disabled"
                        label="Capacity"
                    />

                    <TextField required value={room.description} onChange={(e) => setRoom({ ...room, description: e.target.value })}
                        id="outlined-multiline-description"
                        label="Description"
                        multiline
                        rows={4}/>

                    <Stack sx={{ mt: 3 }} direction='row' spacing={2}>
                        <Button
                            color="primary"
                            onClick={onSaveRoom}
                            loading={loading}
                            loadingPosition="start"
                            startIcon={<SaveIcon />}
                            variant="contained">
                            Save
                        </Button>
                        <Button
                            color="primary"
                            onClick={() => navigate(-1)}
                            loading={loading}
                            loadingPosition="start"
                            startIcon={<CancelIcon />}
                            variant="outlined">
                            Cancel
                        </Button>
                    </Stack>
                </Stack>
            </Box> 
        </>
    )
}